import { createStore } from 'vuex'

// 第一步：调用 vuex hook createStore 来创建一个状态管理实例
export default createStore({
    // 第二步：设置全局管理的状态变量
    // 第八步：vuex 刷新页面后数据会初始化，我们需要配合 localStorage 进行固化
    state: {
        userName: localStorage.getItem('userName') ?
            localStorage.getItem('userName') : "第一次调用，用户初始化状态 vuex-store"
    },
    // 第三步：同步修改 state 数据方法声明
    mutations: {
        M_LOGIN(state, userName) {
            // [object,object] localStorage 里面只能存储字符流
            localStorage.setItem("userName", userName)
            state.userName = userName;
        },
        M_LOGOUT(state) {
            localStorage.setItem("userName", "用户退出状态")
            state.userName = "用户退出状态"
        }
    },
    // 第四步：异步修改 state 数据方法调用
    actions: {
        // 状态数据的修改更新 DOM 是异步，我们去调用 state 数据修改的时候，一般都使用 actions 中定义的方法
        login({ commit }, userName) {
            commit("M_LOGIN", userName)
        },
        logout({ commit }) {
            commit("M_LOGOUT")
        }
    },
    // 模块化的操作使用
    modules: {},
    // 类似于我们 computed 计算属性
    getters: {
        userNameLength(state) {
            return state.length;
        }
    }
})